<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Accordion - 手风琴</title>
<link rel="shortcut icon" href="../../../../kissy-dpl/base/assets/favicon.ico"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/reset.css"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/kissy-docs.css"/>

<link rel="stylesheet" href="../../../../kissy-dpl/base/build/css/loading.css"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/build/css/form.css"/>

<script src="../../../build/kissy.js"></script>
<!--
<script src="../base.js"></script>
<script src="../aria.js"></script>
<script src="../accordion/base.js"></script>
<script src="../accordion/aria.js"></script>
<script src="../autoplay.js"></script>
<script src="../autorender.js"></script>
<script src="../carousel/base.js"></script>
<script src="../carousel/aria.js"></script>
<script src="../effect.js"></script>
<script src="../circular.js"></script>
<script src="../countdown.js"></script>
<script src="../lazyload.js"></script>
<script src="../slide/base.js"></script>
<script src="../slide/aria.js"></script>
<script src="../tabs/base.js"></script>
<script src="../tabs/aria.js"></script>
<script src="../../switchable.js"></script>
-->
<script src="../../../../kissy-dpl/base/assets/kissy-docs.js"></script>
</head>
<body>
<div id="header">
    <h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="../../../../kissy-dpl/base/assets/logo.png"/></a></h1>
    <div class="sub-title">Switchable</div>
    <ul class="navigation">
        <li><a href="http://blog.kissyui.com/">博客</a></li>
        <li><a href="http://github.com/kissyteam">源码</a></li>
    </ul>

</div>
<div id="content" class="form">
    <div class="s-crumbs">
        <span>当前位置：</span>
        <a href="http://kissyui.com/">KISSY</a>
        <a href="http://docs.kissyui.com/docs/html/api/component/switchable/accordion.html">Accordion</a>
        <span>Demo</span>
    </div>

    <pre class="s-section">
功能：手风琴
源码：<a href="../accordion/base.js">../accordion/base.js</a></pre>

    <h3 class="s-title">Accordion - 手风琴</h3>
    <div class="s-section">
        <style>
            #accordion1 {
                width: 300px;
                border: 1px solid #ccc;
            }

            #accordion1 .ks-switchable-trigger {
                padding: 3px 10px;
                cursor: pointer;
                border-bottom: 1px solid #ddd;
                background: #f3f3f3;
                overflow: hidden;
                height: 18px;
            }

            #accordion1 .ks-switchable-trigger h3 {
                float: left;
                width: 100px;
                margin-left: 5px;
            }

            #accordion1 .ks-switchable-panel {
                height: 150px;
                padding: 3px 10px;
                border-bottom: 1px solid #ddd;
            }

            #accordion1 .ks-icon {
                float: left;
                width: 12px;
                height: 12px;
                overflow: hidden;
                margin-top: 2px;
                font-size: 0;
                vertical-align: middle;
                background: url(assets/accordion-sprite.png) no-repeat 0 0;
            }

            #accordion1 .ks-active .ks-icon {
                background-position: -20px 0;
            }

            #accordion1 .last-trigger {
                border-bottom-width: 0
            }

            #accordion1 .ks-active {
                border-bottom-width: 1px
            }

            #accordion1 .last-panel {
                border-bottom: none
            }

        </style>
        <div id="accordion1" class="s-demo">
            <div class="ks-switchable-trigger"><i class="ks-icon"></i><h3>标题A</h3></div>
            <div class="ks-switchable-panel" style="display:none;">
                1、支持鼠标滑过和点击触点两种方式<br/>
                2、支持同时展开多个面板
                <input/>
            </div>
            <div class="ks-switchable-trigger"><i class="ks-icon"></i><h3>标题B</h3></div>
            <div class="ks-switchable-panel" style="display:none;">内容B<br/>内容B<br/>内容B <input/></div>
            <div class="ks-switchable-trigger"><i class="ks-icon"></i><h3>标题C</h3></div>
            <div class="ks-switchable-panel" style="display:none;">内容C<br/>内容C<br/>内容C<br/>
                内容C<br/>内容C <input/></div>
            <div class="ks-switchable-trigger last-trigger"><i class="ks-icon"></i><h3>标题D</h3>
            </div>
            <div class="ks-switchable-panel last-panel" style="display:none;">内容D<br/>内容D<br/>
                内容D <input/></div>

            <script>
                KISSY.use("dom,event,anim,switchable", function(S, DOM, Event, Anim, Switchable) {
                    var Accordion = S.Accordion,
                            Easing = S.Easing;

                    S.ready(function(S) {
                        window.accordion = Accordion('#accordion1', {
                            multiple: true //,
                            //autoplay:true,
                            //switchTo:0
                            //'activeTriggerCls': 'collapse'
                        });
                    });
                });
            </script>
        </div>
        <a class="s-view-code" href="#">显示源码</a>
    </div>


    <h3 class="s-title"></h3>
    <div class="s-section">
        <style>
            .shop-hesper {
                margin-bottom: 10px;
                position: relative;
                z-index: 1;
            }

            .shop-hesper .hesper-cats {
                background-color: #FCFCFC;
                border: 1px solid #E5E5E5;
                padding-bottom: 45px;
            }

            .shop-hesper .hesper-cats ol {
                border-bottom: 1px solid #F0F0F0;
                height: 25px;
                padding-left: 12px;
            }

            .shop-hesper .hesper-cats ol li {
                color: #666666;
                font-size: 14px;
                font-weight: 700;
                line-height: 25px;
            }

            .shop-hesper .hesper-cats li {
                float: left;
            }

            .shop-hesper .hesper-cats ol a {
                float: left;
                margin-right: 0.5em;
            }

            .shop-hesper .hesper-cats ul {
                padding: 10px 10px 0 20px;
            }
            .shop-hesper .hesper-cats i {
                background: url("http://img05.taobaocdn.com/tps/i5/T1JLtRXhlAXXXXXXXX-128-83.png") no-repeat scroll 0 0 transparent;
                background-position: -54px -56px;
                height: 25px;
                width: 21px;

                display: inline-block;
                overflow: hidden;
                vertical-align: top;
            }


            .shop-hesper .hesper-cats .trigger {
                background: url("http://img05.taobaocdn.com/tps/i5/T1JLtRXhlAXXXXXXXX-128-83.png") no-repeat scroll 0 0 transparent;
                background-position: 0 -56px;
                cursor: pointer;
                height: 27px;
                position: absolute;
                right: 0;
                top: 0;
                width: 27px;
                z-index: 1;
            }


            .shop-hesper .hesper-cats .collapse {
                background-position: -27px -56px;
            }

        </style>
        <div class="shop-hesper  s-demo" id="accordion2">
            <div class="hesper-cats">
                <ol>
                    <li><a href="http://shop62814299.taobao.com?browseType=&search=y">所有宝贝</a><i></i></li>
                </ol>
                <ul class="hesper-cats-list" style="display:none">
                    <li>内容内容内容</li>
                </ul>
                <i class="trigger" title="展开或者收缩"></i>
            </div>

            <script>
                KISSY.use("dom,event,anim,switchable", function(S, DOM, Event, Anim, Switchable) {
                    S.Accordion('#accordion2', {
                        'triggerCls': 'trigger',
                        'panelCls': 'hesper-cats-list',
                        'multiple': 'true',
                        'activeTriggerCls': 'collapse'
                    });
                });
            </script>
        </div>
        <a class="s-view-code" href="#">显示源码</a>
    </div>

    <h3 class="s-title">键盘快捷键</h3>
    <div class="s-section">
        <ul class="s-list">
            <li>左/上键:当焦点在标签时转到上一个标签</li>
            <li>右/下键:当焦点在标签时转到下一个标签</li>
            <li>Home: 当焦点在标签时转到第一个标签</li>
            <li>End: 当焦点在标签时转到最后一个标签</li>
            <li>enter/space: 当焦点在当前标签时，展开对应的面板</li>
            <li>Control + PgUp : 当然焦点在容器内时转到当前标签上一个标签</li>
            <li>Control + PgDn : 当然焦点在容器内时转到当前标签下一个标签</li>
        </ul>
    </div>

    <h3 class="s-title">Note</h3>
    <div class="s-section">chrome 不支持 Control + PgUp 以及 Control + PgDn</div>
</div>
</body>
</html>
